<template>
    <el-row :gutter="20" style="height:100%;">
        <el-col :span="6" style="height:100%;">
            <div class="bg1" style="height:100%;">
                <dv-border-box11 ref="dvBox" style="width:100%;height:100%;" :color="['white', 'green']" title="优秀宿舍" :title-width="400"
                    :animate="false">
                    <Excellent :Data="MyData1" style="height:100%;" />
                </dv-border-box11>
            </div>
        </el-col>
        <el-col :span="12" style="height:100%;">
            <Table />
        </el-col>
        <el-col :span="6" style="height:100%;">
            <div class="bg1" style="height:100%;">
                <dv-border-box11 ref="dvBox1" style="width:100%;height:100%;" :color="['white', 'red']" title="挂寝宿舍" :title-width="400"
                    :animate="false">
                    <Excellent :Data="MyData2" style="height:100%;" />
                </dv-border-box11>
            </div>
        </el-col>
    </el-row>
</template>
<script setup>
import Table from "./MyTable.vue";
import Excellent from './Excellent.vue'
import { ref, onMounted, nextTick, inject, computed } from 'vue';
const dvBox = ref();
const dvBox1 = ref();
const wsState = inject('wsState');
const MyData1 = computed(() => wsState.excellent);
const MyData2 = computed(() => wsState.bad);
onMounted(() => {
    setTimeout(() => {
        if (dvBox.value) {
            nextTick(() => {
                dvBox.value.initWH();
            })
        }
        if (dvBox1.value) {
            nextTick(() => {
                dvBox1.value.initWH();
            })
        }
    })
})
</script>

<style>
.bg1 {
    width: 100%;
    min-height: 20vh;
}
</style>